<template>
	<view class="tabBar" :style="{height:isIos?'140rpx':'98rpx'}">
		<view class="tabBar_list" :style="{paddingBottom:isIos?'40rpx':''}">
			<view v-for="(item,index) in tabList" :key="item.id" :class="item.bigType ? 'tabBar_item2' : 'tabBar_item'"
				@click="selectTabbar(item,index)">
				<template v-if="item.icon && item.activeIcon">
					<image v-if="index == showIndex" :src="item.activeIcon"></image>
					<image v-else :src="item.icon"></image>
				</template>
				<template v-else>
					<view class="emptyImg"></view>
				</template>
				<view class="tabBar_name" :style="{color: index == showIndex ? activeColor : color}">{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// tabbar数据源
			tabList: {
				type: Array,
				default () {
					return []
				}
			},
			// 初始选中tabbar索引
			index: {
				type: Number,
				default: 0
			},
			// 默认文字颜色
			color: {
				type: String,
				default: '#999'
			},
			// 选中文字颜色
			activeColor: {
				type: String,
				default: '#3A76EE'
			},
			//是否需要设置navigationBarTitleText文字
			isNeedSetNavTitle: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				isIos: false,
				showIndex: 0
			}
		},
		watch: {
			index: {
				deep: true,
				immediate: true,
				handler(inx) {
					this.showIndex = inx
				},
			},
		},
		mounted() {
			if (this.isNeedSetNavTitle) {
				uni.setNavigationBarTitle({
					title: this.tabList[this.showIndex]?.name
				})
			}
			// 判断市场常见的几种刘海屏机型
			uni.getSystemInfo({
				success: res => {
					let modelmes = res.model
					if (modelmes.indexOf('iPhone') >= 0) this.isIos = true
					else this.isIos = false
				}
			})
		},
		methods: {
			selectTabbar(item, index) {
				if (this.showIndex != index) {
					this.showIndex = index
					this.$emit('change', item)
				}
				if (this.isNeedSetNavTitle) {
					uni.setNavigationBarTitle({
						title: this.tabList[this.showIndex]?.name
					})
				}
			}
		}
	}
</script>

<style scoped>
	.tabBar {
		width: 100%;
		height: 100rpx;
		padding: 8rpx 0;
		background: #FFFFFF;
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		z-index: 99999;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.15);
	}

	.tabBar_list {
		width: 98%;
		display: flex;
		justify-content: space-between;
	}

	.tabBar_item {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 24rpx;
		color: #666666;
	}

	.tabBar_item image {
		width: 56rpx;
		height: 56rpx;
		margin-bottom: 2rpx;
	}

	.tabBar_item2 {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 24rpx;
		color: #999999;
		margin-top: -62rpx;
		position: relative;
		z-index: 101;
	}

	.tabBar_item2 image {
		width: 100rpx;
		height: 118rpx;
	}

	.emptyImg {
		width: 56rpx;
		height: 56rpx;
		margin-bottom: 2rpx;
		background: dodgerblue;
		border-radius: 50%;
	}

	.tabBar_name {
		text-align: center;
		line-height: 24rpx;
		margin-top: 10rpx;
	}
</style>